<template>
	<!-- 这是村支书电访首页 -->
	<view>
		<u-navbar title="回访详情" @rightClick="rightClick" :autoBack="true" placeholder leftIconSize="22px"
			rightText="历史回访呀">
		</u-navbar>
		<view class="header">
			<view class="visitor">
				<text>走访人信息</text>
			</view>
		</view>
		<view class="VisitorInformation">
			<view class="VisitorInformation_list">
				<text>负责人</text>
				<text>走访人姓名</text>
			</view>
			<view class="VisitorInformation_list">
				<text>回访方式</text>
				<text>电话回访</text>
			</view>
			<view class="VisitorInformation_list">
				<text>回访时间</text>
				<text>1949-10-01 15:00:00</text>
			</view>
			<view class="VisitorInformation_list">
				<view class="">
					<view class="certificate">
						回访凭证
					</view>
					<view class="VisitorInformation_list_image" v-for="intem in 3">
						<image  :src="intem" mode="aspectFit" width="16rpx" height="160rpx"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="visitor">
			<text>回访用户信息</text>
		</view>
		<view class="indexbody" >
			<view class="indexbody_title">
				<view>里尔</view>
			</view>
			<view class="indexbody_content">
				<text>男</text>
				<text>29岁</text>
				<text>21522222222</text>
			</view>
			<view class="indexbody_address">
				<view class="">
					<image src="../../static/index/address.png" mode=""></image>
				</view>
				<view class="">
					<text>河南省郑州市郑东新区内环路会展中心26号</text>
				</view>
			</view>
			<view class="indexbody_phone">
				<text>15025802580</text>
			</view>
		</view>
		<!-- 最新回访信息 -->
		<view class="visitor">
			<text>回访内容</text>
		</view>
		<view class="VisitorInformation">
			<view class="VisitorInformation_list">
				<text>居住环境</text>
				<text>整洁</text>
			</view>
			<view class="VisitorInformation_list">
				<text>个人卫生</text>
				<text>很好</text>
			</view>
			<view class="VisitorInformation_list">
				<text>身体状况</text>
				<text>一般</text>
			</view>
			<view class="VisitorInformation_list">
				<view class="certificatee">
					<text>需求</text>
				</view>
				<view class="Demandcontent">
					<text>希望政府可以帮本人买一辆车希望政府可以帮本人买一辆车</text>
				</view>
			</view>
			<view class="VisitorInformation_list">
				<text>其他</text>
				<text>暂无</text>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="button">
			<u-button class="cancel" type="primary" shape="circle" :plain="true" text="不通过"></u-button>
			<u-button class="fillin" shape="circle" text="通过" @click="tofillphone"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 图片
				src: 'https://cdn.uviewui.com/uview/album/1.jpg'
			};
		},
		methods: {
			rightClick() {
				uni.navigateTo({
					url: './'
				})
			},
			tofillphone() {
				uni.navigateTo({
					url: './Fill_in_the_content_phone'
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #EFF1F5;
	}
</style>

<style lang="scss">
	//用户信息
	.indexbody {
		margin: 15px 10px;
		background-color: #fff;
		border-radius: 10px;

		.indexbody_title {
			display: flex;
			justify-content: space-between;
			padding: 10px 15px;

			image {
				width: 20px;
				height: 20px;
			}

			:first-child {
				font-weight: bold;
			}
		}

		.indexbody_content {
			background-color: #F8F8F8;
			margin: 5px 15px;
			padding: 5px;
			font-size: 12px;

			text {
				padding: 0 8px;
				border-right: 1px solid #333333;
			}

			:last-child {
				border-right: none;
			}
		}

		.indexbody_address {
			display: flex;
			margin: 10px 15px;

			image {
				width: 20px;
				height: 20px;
				margin-right: 9px;
			}
		}

		.indexbody_phone {
			display: flex;
			justify-content: center;
			background-color: #F8FAFF;
			padding-bottom: 12px;
			border-bottom-right-radius: 10px;
			border-bottom-left-radius: 10px;
			padding: 5px 0;

			text {
				margin-right: 10px;
			}
		}
	}

	.header {
		margin-top: 10px;
	}

	.visitor {
		margin-left: 15px;
		color: #333333;
		font-size: 16px;
		font-weight: 500;
	}

	.VisitorInformation {
		margin: 20px 15px;
		background-color: #fff;
		border-radius: 10px;

		.VisitorInformation_list {
			padding: 15px;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #EFF1F5;

			text:first-child {
				color: #666666;
			}

			text:last-child {
				color: #333333;
			}

			.VisitorInformation_list_image {
				margin: 15px 0 0 0;
				display: inline-block;
				padding-right: 10px;
			}

		}

	}

	.certificatee {
		display: block;
		width: 110px;
		vertical-align: middle;
	}

	.Demandcontent {
		padding-left: 20px;
		margin-right: -5px;
	}

	.button {
		background-color: #fff;
		padding: 10px;
		margin: 4px 0 0 0px;
		display: flex;

	}

	.cancel {
		width: 150px;
	}

	.fillin {
		width: 150px;
		margin-left: 30px;
		background-color: #0B66FD;
		color: #fff;
	}
</style>
